import { useContext } from 'react';
import DeleteIcon from '../../icon/DeleteIcon';
import { InBizUploadCtx } from '../../../context';

const DeleteButton = (props: any) => {
  const { id, className, currentFile } = props;
  const { uploader, onItemRemove } = useContext(InBizUploadCtx);
  const onClick = () => {
    const file = uploader.methods.getFile(id);
    Promise.resolve((onItemRemove && onItemRemove({ id, ...currentFile, ...file })) ?? true).then(
      (res) => {
        if (Boolean(res) === false) {
          return;
        }
        if (!currentFile?.fromServer) {
          uploader.methods.deleteFile(id);
        }
      },
    );
  };
  return (
    <button
      aria-label="delete"
      className={`react-fine-uploader-delete-button ${className || ''}`}
      onClick={() => onClick()}
      type="button"
    >
      <DeleteIcon />
    </button>
  );
};

export default DeleteButton;
